<template>
  <br />
  <z-switch
    v-model:checked="customize"
    un-checked-children="default"
    checked-children="customize"
  />
  <z-divider />
  <z-config-provider>
    <template v-if="customize" #renderEmpty>
      <div style="text-align: center">
        <smile-outlined style="font-size: 20px" />
        <p>Data Not Found</p>
      </div>
    </template>
    <div class="config-provider">
      <h3>Select</h3>
      <z-select :style="style" :options="[]" />

      <h3>TreeSelect</h3>
      <z-tree-select :style="style" :tree-data="[]" />

      <h3>Cascader</h3>
      <z-cascader :style="style" :options="[]" :show-search="true" />

      <h3>Transfer</h3>
      <z-transfer :data-source="[]" />

      <h3>Table</h3>
      <z-table style="margin-top: 8px" :columns="columns" :datz-source="[]" />
      <h3>List</h3>
      <z-list :data-source="[]" />
    </div>
  </z-config-provider>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const customize = ref(false)
    return {
      customize,
      style: {
        width: '200px'
      },
      columns: [
        {
          title: 'Name',
          width: 300
        },
        {
          title: 'Age',
          width: 300
        }
      ]
    }
  }
})
</script>

<style scoped>
.code-box-demo .config-provider h3 {
  font-size: inherit;
  margin: 16px 0 8px 0;
}
</style>
